<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="wrapper">
      <strong>年会抽奖</strong>
      <h1>一等奖：<span class="one">???</span></h1>
      <h3>二等奖：<span class="two">???</span></h3>
      <h5>三等奖：<span class="three">???</span></h5>
    </div>
  </body>
</html>
<script>
  // 准备数组
  // const arr = ["苹果手机", "电脑", "耳机", "笔记本"];
  // 生成随机数（0-4）不包含4
  // const random = Math.random()*4   //需要向下取整
  //   const random = Math.floor(Math.random() * 4);

  // 开始
  // const random = parseInt(Math.random() * arr.length);
  // //   console.log(random);
  // console.log(arr[random]);
  // const one = document.querySelector(".one");
  // one.innerHTML = arr[random];
  // //   抽完将第二个里面就不能出现，抽完将 需要删除  splice（）
  // // splice(索引，删除的数量，删除后添加的元素)
  // arr.splice(random, 1);
  // // 出现undefined，因为两个都是写死的4，应该是 数组长度同步

  // const random2 = parseInt(Math.random() * arr.length);
  // const two = document.querySelector(".two");
  // two.innerHTML = arr[random2];
  // arr.splice(random2, 1);

  // const random3 = parseInt(Math.random() * arr.length);
  // const three = document.querySelector(".three");
  // three.innerHTML = arr[random3];
  // arr.splice(random3, 1);
  // 结束

  
  // 优化完善代码--循环实现
  const arr = ["苹果手机", "电脑", "耳机", "笔记本"];
  const spans = [".one", ".two", ".three"];

  for (var i = 0; i < spans.length; i++) {
    const random = parseInt(Math.random() * arr.length);
    const span = document.querySelector(spans[i]);
    span.innerHTML = arr[random];
    arr.splice(random, 1);
  }
</script>
